<template>
  <div class="login" id="login-app">
    <div style="width: 10vw; height: 100vh; border: 1px solid green">
      <a href="#" @click="loadPage('/admin/example')">Example</a>
      <n-anchor
        :show-rail="true"
        :bound="20"
        :show-background="true"
        type="block"
        style="width: 100%"
      >
        <n-anchor-link title="API" @click="loadPage('/admin/example')" />
        <n-anchor-link title="API" @click="loadPage('/admin/example')" />
        <n-anchor-link title="API" @click="loadPage('/admin/example')" />
        <n-anchor-link title="API" @click="loadPage('/admin/example')" />
        <n-anchor-link title="API" @click="loadPage('/admin/example')" />
      </n-anchor>
    </div>
    <div style="width: 90vw; height: 100vh; border: 1px solid red">
      <iframe
        :src="currentPage"
        style="width: 100%; height: 100%; border: none"
      ></iframe>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const currentPage = ref("");

function loadPage(url) {
  currentPage.value = url;
}
</script>

<style less>
.body {
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 1366px;
}
.login {
  width: 100vw;
  height: 100vh;
  overflow-y: hidden;
  display: flex;
  justify-content: center;
}
</style>
